<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试Bootstarp</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets\plugins\bootstrap-4.4.1\css\bootstrap.min.css" rel="stylesheet">
    <link href="assets/plugins/iconfont/font_1706569_m6sbfjai6ck/iconfont.css" rel="stylesheet">

    <style type="text/css">
        .My_div
        {
            border: 1px solid red;
        }

        /*当屏幕大小<=520px的时候样式消失*/
        @media screen and (max-width: 520px){
            .My_div
            {
                display: none;
            }
        }

        /*!important主要是用来取消就近原则*/
        .My_div2
        {
            border: 1px solid black !important;
        }

        .iconfont.icondelete
        {
            font-size: 60px;
            color: greenyellow;
        }
    </style>

</head>
<body>

<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

<h1 align="center">BootStarp的基本使用</h1>

<!--Bootstarp的网格布局-->
<div class="container" style="border: 1px solid #8fd19e">
    <!--行-->
    <div class="row">
        <!--列 -->
        <!--xs：超小设备手机（< 768px）
            sm:小型设备平板电脑（≥ 768px）
            md:中型设备台式电脑（≥ 992px）
            lg:大型设备台式电脑（≥ 1200px）
        -->
        <div class="col-md-4" style="border: 1px solid #005cbf">左</div>
        <div class="col-md-4" style="border: 1px solid #005cbf">右</div>
    </div>

    <div class="row">
        <!--列 -->
        <!--xs：超小设备手机（< 768px）
            sm:小型设备平板电脑（≥ 768px）
            md:中型设备台式电脑（≥ 992px）
            lg:大型设备台式电脑（≥ 1200px）
        -->
        <div class="col-md-6" style="border: 1px solid #1c7430">左</div>
        <div class="col-md-6" style="border: 1px solid #1c7430">右</div>
    </div>
</div>

<br/>
<br/>
<br/>

<div class="My_div">
    Hello媒体查询
</div>

<br/>
<br/>
<br/>

<div class="My_div2" style="border: 1px solid greenyellow">
    判断就近原则
</div>

<br/>
<br/>
<br/>

<!--表格的用法-->
<!--.table	为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑-->
<table class="table table-striped table-bordered table-hover table-condensed">
    <thead>
    <tr>
        <th>说明</th>
        <th>备注</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>1111</td>
            <td>222</td>
        </tr>
        <tr>
            <td>1111</td>
            <td>2222</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

<!--图标显示-->
<div class="delete">
    <i class="iconfont icondelete"></i>
</div>

<script src="assets/plugins/bootstrap-4.4.1/js/bootstrap.min.js"></script>
<script src="assets/plugins/jquery-3.4.1.min.js"></script>

</body>
</html>